<template>
    <el-row>
        <el-col :span="$scopedSlots.default ? 22 : 24">
            <el-input type="text" v-model="query" placeholder="请输入名称" clearable @clear="$emit('setValueClear',query)"/>
        </el-col>
        <el-col :span="2">
            <!-- 按钮 -->
            <slot :q="query" />
        </el-col>
    </el-row>
</template>

<script>
import { debounce } from "@/utils"
export default {
    name: "GSearchQuery",
    data() {
        return {
            query: "",
            debounceQuery: debounce(()=>{
            console.log("准备查询....");
            this.$emit("setValue", this.query);
        }, 1000)
        };
    },
    watch: {
        query() {
            if(this.$scopedSlots.default) return
            this.debounceQuery();
        },
    },
};
</script>

<style scoped>
.el-row {
    margin-bottom: 10px;
}
</style>